<template>
	<div>
		<!-- xpert导航栏 -->
		<xpertNavBar :statusTab="statusTab" />
		<div style="height: 150px; width: 100%"></div>
		<!-- Help & Support -->
		<div class="help">Help & Support</div>
		<!-- div -->
		<div class="helpDiv m1280 f f-a-c f-j-b">
			<div @click="goOrder(1, 'Order management')" :class="{ sange: ind == 2 || ind == 5, sishi: ind == 3 || ind == 6 }" class="helpItem hand f f-d-c f-j-c f-a-c">
				<div class="imgBox">
					<img src="/src/assets/user/31.png" class="supImg" alt="" />
				</div>
				<div class="order">Order management</div>
			</div>
			<div @click="goOrder(2, 'Help')" :class="{ sange: ind == 2 || ind == 5, sishi: ind == 3 || ind == 6 }" v-if="ind == 3 || ind == 6" class="helpItem hand f f-d-c f-j-c f-a-c">
				<div class="imgBox">
					<img src="/src/assets/9.png" class="supImg" alt="" />
				</div>
				<div class="order">Help</div>
			</div>
			<div @click="goSystem" :class="{ sange: ind == 2 || ind == 5, sishi: ind == 3 || ind == 6 }" class="helpItem hand f f-d-c f-j-c f-a-c">
				<div class="imgBox">
					<img src="/src/assets/user/32.png" class="supImg" alt="" />
				</div>
				<div class="order">System</div>
			</div>
			<div @click="Feedback" :class="{ sange: ind == 2 || ind == 5, sishi: ind == 3 || ind == 6 }" class="helpItem hand f f-d-c f-j-c f-a-c">
				<div class="imgBox">
					<img src="/src/assets/user/33.png" class="supImg" alt="" />
				</div>
				<div class="order">Feedback</div>
			</div>
		</div>
		<!-- faq -->
		<div class="faq">
			<div class="faqTop">FAQs</div>
			<div class="faqBody">
				<div v-for="(item, index) in faqList" @click="goDetils(item)" :key="index" class="faqItem hand f f-a-c f-j-b p-l-10 p-r-10">
					<div class="countNei">{{ item.title }}</div>
					<img src="/src/assets/user/2.png" class="img" alt="" />
				</div>
				<div @click="router.push('/BlogFAQs')" class="more hand">More</div>
			</div>
		</div>
		<UpLoad ref="upLoads" />
		<xpertTabbar />
	</div>
</template>
<script setup>
	import { ref, onMounted } from "vue";

	import xpertTabbar from "@/components/tabBar/xpertTabbar.vue";
	import xpertNavBar from "@/components/navBar/xpertNavBar.vue";
	import { FaqsList } from "@/api/xpert.js";
	import { FaqsLists } from "@/api/knowClub/index.js";
	import router from "@/router/index.js";
	import { useRoute } from "vue-router";
	import UpLoad from "./upLoad.vue";
	import ButtonDiffuse from "@/components/Button/ButtonDiffuse.vue";
	let statusTab = ref(1);
	let upLoads = ref("");
	let numInde = localStorage.getItem("home") || 1;
	let ind = localStorage.getItem("ind") || 1;
	let pageNum = ref(1);
	let total = ref(0);
	let faqList = ref([]);
	let route = useRoute();
	let act = route.query.act;
	onMounted(() => {
		initFaqList();
		window.addEventListener("scroll", handleScroll);
	});
	const initFaqList = async () => {
		let n = {};
		if (act == 2 || act == 6) {
			// 代表kc
			n = await FaqsLists({ pageNum: pageNum.value });
		} else {
			// 代表xp
			n = await FaqsList({ pageNum: pageNum.value });
		}
		total.value = n.data.total;
		faqList.value = [...faqList.value, ...n.data.list];
	};
	const goDetils = item => {
		router.push({
			path: "/Details",
			query: {
				id: item.id
			}
		});
	};
	// 去OrderManagement
	const goOrder = (num, str) => {
		router.push({
			path: "/OrderManagement",
			query: {
				num: num == 1 ? 21 : 22,
				str: str
			}
		});
	};
	// goSystem
	const goSystem = () => {
		router.push({ path: "/System" });
	};
	// 显示上传框
	const Feedback = () => {
		upLoads.value.act = act;
		let token = "";
		if (numInde == 1) {
			// 代表是xpert首页
			token = "Bearer " + localStorage.getItem("xpToken") || "";
		} else {
			// 代表是knowClub首页
			token = "Bearer " + localStorage.getItem("kcToken") || "";
		}
		if (act == 2 || act == 6) {
			upLoads.value.uploadHeaders = {
				"Authorization-Kc": token
			};
		} else {
			upLoads.value.uploadHeaders = {
				"Authorization-Xp": token
			};
		}

		upLoads.value.upLoadVisible = true;
	};
	// 这个是当头部导航栏滑倒下面时给tabr加个背景
	const handleScroll = () => {
		const scrollTop = document.documentElement.scrollTop;
		if (scrollTop > 0) {
			statusTab.value = 2;
		} else {
			statusTab.value = 1;
		}
	};
</script>
<style scoped>
	@import "./index.scss";
</style>
